<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}">
		<view class="flex flex-wrap" style="gap: 20rpx;width: calc(80rpx * 4 + 20rpx * 3);">
			<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
				:style="item.style">
				<text class="spread-up" :style="{opacity: item.hideUD ? 0 : 1}">{{item.up}}</text>
				<template v-if="isAch == 1">
					<template v-if="!item.hideUD">
						<image :src="item.front" mode="widthFix" v-if="item.dir == 0">
						</image>
						<image :src="item.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix" :style="{opacity: 0}"></image>
						<text class="spread-name">{{item.name}}</text>
					</template>
				</template>
				<template v-else>
					<image src="@/static/tarot-bg.png" mode="widthFix" :style="{opacity: item.hideUD ? 0 : 1}"></image>
					<text class="spread-name">{{item.name}}</text>
				</template>
				<!-- <image src="@/static/tarot-bg.png" mode="widthFix" :style="{opacity: item.hideUD ? 0 : 1}"></image> -->
				<text class="spread-label flex justify-center" :style="{opacity: item.hideUD ? 0 : 1}">{{item.label}}</text>
				<!-- <text class="spread-name">{{item.name}}</text> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const PositionDictionary = ref([{
			up: " ",
			name: "本月",
			label: " ",
			hideUD: true,
			style: {}
		},
		{
			up: " 1 ",
			name: "上旬",
			label: "相貌",
			style: {}
		},
		{
			up: " 2 ",
			name: "中旬",
			label: "身材",
			style: {}
		},
		{
			up: " 3 ",
			name: "下旬",
			label: "健康",
			style: {}
		},
		{
			up: " ",
			name: "次月",
			label: " ",
			hideUD: true,
			style: {}
		},
		{
			up: " 4 ",
			name: "上旬",
			label: "条件",
			style: {}
		},
		{
			up: " 5 ",
			name: "中旬",
			label: "学历",
			style: {}
		},
		{
			up: " 6 ",
			name: "下旬",
			label: "脾气",
			style: {}
		},
		{
			up: " ",
			name: "后月",
			label: " ",
			hideUD: true,
			style: {}
		},
		{
			up: " 7 ",
			name: "上旬",
			label: "主被动",
			style: {}
		},
		{
			up: " 8 ",
			name: "中旬",
			label: "暖意",
			style: {}
		},
		{
			up: " 9 ",
			name: "下旬",
			label: "适配置",
			style: {}
		}
	])
	onMounted(() => {
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		PositionDictionary.value.map((item) => {
			cardList.value.map((card, idx) => {
				if (item.up == (idx + 1)) {
					item.dir = card.dir
					item.front = card.tarot.front
					item.back = card.tarot.back
				}
			})
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 30rpx 0;
	}

	.spread-item {
		position: relative;
		box-sizing: border-box;
	}

	.spread-item:nth-child(4n+1) .spread-name {
		color: #333;
	}
</style>